<template>
  <div style="width:100%;height:100%">
    <v-chart :options="option" :initOptions="initOptions" :theme="theme" autoresize />
  </div>
</template>
<script>

export default {
  name: 'chart',
  props: ['index'],
  mounted () {
  },
  data () {
    return {
      initOptions: { renderer: 'canvas' },
      theme: 'default'
    }
  },
  methods: {
  },
  computed: {
    insideSlideArray () {
      return this.$store.state.layout[this.$store.state.activeArrayIndex].SlideContent
    },
    insideArrayIndex () {
      return this.insideSlideArray.indexOf(this.insideSlideArray.filter((currentValue) => {
        return currentValue.i === this.index
      })[0])
    },
    getDetail () {
      return this.$store.state.layout[this.$store.state.activeArrayIndex].SlideContent[this.insideArrayIndex].itemContent.detail
    },
    getSeries () {
      var series = []
      series.push({
        name: this.getDetail.sheetData[0][1],
        type: 'bar',
        xAxisIndex: 1,
        yAxisIndex: 1,
        encode: {
          x: 1,
          y: 0
        },
        ...this.getDetail.simpleBar,
        backgroundStyle: {
            color: this.getDetail.simpleBar.backgroundStyle[this.getDetail.simpleBar.backgroundStyle.option]
        }
      })
      series.push({
        name: this.getDetail.sheetData[0][2],
        type: 'bar',
        xAxisIndex: 2,
        yAxisIndex: 2,
        encode: {
          x: 2,
          y: 0
        },
        ...this.getDetail.simpleBar,
        backgroundStyle: {
            color: this.getDetail.simpleBar.backgroundStyle[this.getDetail.simpleBar.backgroundStyle.option]
        }
      })
      return series
    },
    getLabel () {
        var label = []
        for (let i = 1, nr = this.getDetail.nr; i < nr; i++) {
        label.push({
          value: this.getDetail.sheetData[i][0],
          textStyle: {
              align: 'center'
          }
        })
      }
      return label
    },
    option () {
      return {
        animation: this.getDetail.animation,
        title: this.getDetail.title,
        legend: this.getDetail.legend,
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        dataset: {
          source: this.getDetail.sheetData
        },
        xAxis: [
            {
                show: false
            },
            {
                ...this.getDetail.xAxis,
                gridIndex: 1,
                type: 'value',
                max: this.getDetail.popPyramid.max,
                inverse: true
            },
            {
                ...this.getDetail.xAxis,
                gridIndex: 2,
                type: 'value',
                max: this.getDetail.popPyramid.max,
                inverse: false
            }
        ],
        yAxis: [
            {
                show: true,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                data: this.getLabel
            },
            {
                ...this.getDetail.yAxis,
                gridIndex: 1,
                type: 'category',
                position: 'right',
                show: true,
                axisLabel: {
                    show: false
                }
            },
            {
                ...this.getDetail.yAxis,
                gridIndex: 2,
                type: 'category',
                position: 'left',
                show: true,
                axisLabel: {
                    show: false
                }
            }
        ],
        series: this.getSeries,
        color: this.getDetail.color[this.getDetail.color.option],
        grid: [
            {
            show: false,
            left: '10%',
            top: '20%',
            bottom: '5%',
            width: '5%'
        }, {
            show: false,
            left: '15%',
            top: '20%',
            bottom: '5%',
            containLabel: true,
            width: '35%'
        }, {
            show: false,
            left: '50%',
            top: '20%',
            bottom: '5%',
            containLabel: true,
            width: '35%'
        }],
        label: this.getDetail.label,
        itemStyle: this.getDetail.itemStyle,
        emphasis: this.getDetail.emphasis,
        backgroundColor: this.getDetail.backgroundColor[this.getDetail.backgroundColor.option]
      }
    }
  }
}
</script>
<style scoped>
  .echarts {
    width: 100%;
    height: 100%;
  }
</style>
